<template>
    <div>
      <a-form layout="inline" :model="queryModel" v-if="searchBox">
        <a-form-item label="搜索词">
          <a-input v-model:value="queryModel.keyWord" placeholder="请输入搜索关键字名称" />
        </a-form-item>
        <a-form-item label="状态" name="region">
          <a-select v-model:value="queryModel.status" placeholder="请选择通知的状态">
            <a-select-option :value="0">草稿</a-select-option>
            <a-select-option :value="1">已发布</a-select-option>
            <a-select-option :value="2">已撤销</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="时间">
          <a-range-picker v-model:value="queryModel.timeRange" format="YYYY-MM-DD HH:mm:ss" />
        </a-form-item>
        <a-space>
          <a-button type="primary" @click="list">查询</a-button>
          <a-button @click="resetQuery">重置</a-button>
        </a-space>
      </a-form>
      <div class="functionBox">
        <a-space class="left">
          <a-button type="dashed" :icon="h(PlusOutlined)" @click="operate(0)">新增</a-button>
          <a-popconfirm title="是否要真的要批量删除这些通知嘛!" @confirm="remove">
            <template #icon><question-circle-outlined style="color: red;" /></template>
            <a-button :disabled="rowsData.length == 0" type="dashed" :icon="h(MinusOutlined)">删除</a-button>
          </a-popconfirm>
        </a-space>
        <a-space class="right">
          <a-button size="small" shape="circle" :icon="h(ReloadOutlined)" @click="list()" />
          <a-button size="small" shape="circle" :icon="h(SearchOutlined)" @click="() => searchBox = !searchBox" />
        </a-space>
      </div>
      <div ref="basePoint" :style="`height: ${ windowHeight - elementToTopHight - 7 }px !important;`">
        <a-table
            :columns="columns"
            @resizeColumn="handleResizeColumn"
            :rowKey="( record : Notice ) => record.id"
            :row-selection="{ onChange: selectData }"
            :pagination="false"
            :locale="{ emptyText: '暂无数据' }"
            :data-source="data"
            :scroll="{ y: ( windowHeight - elementToTopHight - 116 ) + 'px' }"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'status'">
              <a-tag :color="record.status == 0 ? 'orange' : record.status == 1 ? 'green' : 'red'">
                {{ record.status == 0 ? '草稿' : record.status == 1 ? '已发布' : '已撤销' }}
              </a-tag>
            </template>
            <template v-else-if="column.dataIndex === 'content'">
              <span v-html="record.content" style="height: 80px !important;display: flex"></span>
            </template>
            <template v-else-if="column.dataIndex === 'type'">
              <a-tag color="#87d068" v-if="record.type == 1">用户</a-tag>
              <a-tag color="#f50" v-if="record.type == 2">法律文献</a-tag>
              <a-tag color="#108ee9" v-if="record.type == 0">系统</a-tag>
            </template>
            <template v-else-if="column.dataIndex === 'pushName'">
              <span v-if="record.user">{{ record.user.realName + ' - ' + record.user.phoneNumber }}</span>
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <a-button type="link" @click="operate(1, record)">编辑</a-button>
              <a-button type="link" @click="info(record)">详情</a-button>
              <a-button type="link" @click="changeStatus(record.id,record.status)">更改状态</a-button>
              <a-popconfirm title="是否要真的要删除这条通知嘛!" @confirm="remove([ record.id ])">
                <template #icon><question-circle-outlined style="color: red;" /></template>
                <a-button type="link" class="removeBt">删除</a-button>
              </a-popconfirm>
            </template>
          </template>
        </a-table>
        <div class="pagination">
          <a-pagination
              size="small"
              :disabled="total == 0"
              :total="total"
              show-size-changer
              @change="pageChange"
              show-quick-jumper />
        </div>
      </div>

      <a-modal
          v-model:open="operateStore.open"
          :title="operateStore.cmd == 0 ? '添加通知' : '编辑通知'"
          :width="800"
          :footer="null"
      >
        <NoticeFrom v-if="operateStore.open" :notice="operateStore.notice" @sendNotice="submit" @cancelNotice="resetFrom" ></NoticeFrom>
      </a-modal>


      <a-modal
          v-model:open="statusStore.open"
          title="改变文章的状态"
          :width="500"
          @ok="statusOk"
          @cancel="noStatus"
      >
        <a-form style="margin: 12px 0">
          <a-form-item label="状态">
            <a-select v-model:value="statusStore.status" placeholder="请选择通知的状态">
              <a-select-option :value="0">草稿</a-select-option>
              <a-select-option :value="1">发布</a-select-option>
              <a-select-option :value="2">撤销</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-modal>

      <a-modal
          v-model:open="infoStore.open"
          title="通知详情"
          width="800px"
          :footer="null"
      >
        <div style="display: flex;flex-direction: column;height: 600px;overflow-y: scroll">
          <div style="display: flex;justify-content: space-between;margin: 6px 3px;">
            <span style="font-weight: bold">标题:{{ infoStore.notice.title }}</span>
            <span style="opacity: 0.5;">发布时间：{{ infoStore.notice.publishDate }}</span>
          </div>
          <div v-html="infoStore.notice.content" style="margin: 12px 0;"></div>
        </div>

      </a-modal>

    </div>
</template>








<script setup lang="ts">
    import useNotice from "@/hooks/useNotice";
    import { h } from "vue";
    import {
      MinusOutlined,
      PlusOutlined,
      QuestionCircleOutlined,
      ReloadOutlined,
      SearchOutlined
    } from "@ant-design/icons-vue";
    import DynamicHeight from "@/utils/DynamicHeight";
    import NoticeFrom from "@/components/From/NoticeFrom.vue";
    import type {Notice} from "@/interface/Notice";


    const { basePoint , windowHeight , elementToTopHight } = DynamicHeight();
    const {
      queryModel , list , resetQuery , searchBox ,
      columns , data , handleResizeColumn , selectData ,
      operateStore , operate , resetFrom  , submit , total ,
      pageChange , rowsData , changeStatus , statusStore ,
      noStatus , statusOk , remove , info , infoStore
    } = useNotice();



</script>

<style scoped lang="scss">
    .full-modal {
      .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0;
      }
      .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
      }
      .ant-modal-body {
        flex: 1;
      }
    }
    .functionBox {
      margin: 18px 0 12px 0;
      display: flex;
      justify-content: space-between;
    }
    .pagination {
      margin: 8px 0;
      display: flex;
      justify-content: end;
    }
</style>
